<template>
  <div class="home">
    home
    <div>
      <button>qihuo</button>
    </div>
    <div class="home_hot">
      <div class="home_hot_title">kjk</div>
    </div>
    <div class="home_top">
      <div class="home_top_item" v-for="(item,index) in list" :key="index">
        <div>{{item.name}}</div>
      </div>
    </div>
    <div class="home_p">
      <div class="home_p_c">简单容易</div>
    </div>
    <div class="home_baba">
      <div class="home_baba_son">应该还行</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      list: [
        {
          name: "jkjk"
        },
        {
          name: "jkjk"
        },
        {
          name: "jkjk"
        },
        {
          name: "jkjk"
        },
        {
          name: "jkjk"
        }
      ]
    };
  }
};
</script>
<style lang="scss">
.home {
  &_top {
    display: flex;
    flex-direction: row;
    &_item {
      flex: 1;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  &_p {
    width: 100%;
    height: 200px;
    background-color: red;
    position: relative;
    // text-align: center;
    &_c {
      width: 100px;
      height: 200px;
      background-color: blue;
      // display: inline-block;
      // text-align: left;
      // display: table;
      // margin: 0 auto; //针对子元素
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &_baba {
    display: table;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    background-color: black;
    position: relative;

    &_son {
      height: 100px;
      width: 100px;
      background-color: green;
      position: absolute;

      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
</style>